<template>
	<div>
		<!-- 查询 -->
		<div class="searchBox" style="margin-bottom: 20px">
			<span class="bold">用户名：</span>
			<el-input v-model="realname" placeholder="输入标题" size="small" style="width: 200px"></el-input>
			<span class="bold ml_20">角色：</span>
			<el-select v-model="roleID" placeholder="请选择" size="small">
				<el-option v-for="(item, index) in role_list" :key="index" :label="item.typeName" :value="item.typeId"> </el-option>
			</el-select>
			<el-button class="ml_20" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
			<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
		</div>

		<div class="toolbar">
			<el-button plain type="primary" icon="el-icon-plus" size="mini" @click="showUserDialog">新增</el-button>
		</div>

		<!-- 列表 -->
		<el-table :data="user_list" style="width: 100%">
			<el-table-column type="index" label="#" width="50"></el-table-column>
			<el-table-column prop="realname" label="人员实名"></el-table-column>
			<el-table-column prop="username" label="登录名称"></el-table-column>
			<el-table-column label="性别" width="60">
				<template slot-scope="scope">
					<span>{{ scope.row.sex === 1 ? "男" : "女" }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="email" label="邮箱"> </el-table-column>
			<el-table-column prop="roles" label="角色">
				<template slot-scope="scope">
					<span v-for="(item, i) in scope.row.roles" :key="i">{{ item.roleName + " " }}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="100">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status" @change="handleStatusChange(scope.row)"> </el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="showUserDialog(scope.row)">编辑</el-button>
					<el-button type="text" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 用户信息窗口 -->
		<el-dialog title="新增用户" :visible.sync="userDialog" width="45%" :close-on-click-modal="false" @closed="handleClose">
			<el-form ref="userForm" :model="userForm" :rules="rules" label-width="80px">
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="人员实名" prop="realname">
							<el-input v-model="userForm.realname" placeholder="输入真实名称" size="small"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="登录名称" prop="username">
							<el-input v-model="userForm.username" placeholder="输入登录名称" size="small"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="userForm.email" placeholder="输入邮箱" size="small"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="角色" prop="roles">
							<!-- <el-input v-model="userForm.roles" placeholder="选择角色" size="small"></el-input> -->
							<el-select v-model="userForm.roles" multiple placeholder="选择角色" size="small">
								<el-option v-for="(item, index) in role_list" :key="index" :label="item.roleName" :value="item.id"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="性别" prop="sex">
							<el-radio-group v-model="userForm.sex">
								<el-radio :label="1">男</el-radio>
								<el-radio :label="0">女</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态" prop="status">
							<el-radio-group v-model="userForm.status">
								<el-radio :label="true">启用</el-radio>
								<el-radio :label="false">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="medium" @click="userDialog = false">取 消</el-button>
				<el-button size="medium" type="primary" @click="submitUser">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { roleList } from "../../../api/system/role";
import { getUserlist, addUser, updUser, delUser, userStatus } from "../../../api/system/user";
export default {
	data() {
		return {
			realname: "",
			roleID: "",
			user_list: [],
			role_list: [],
			userDialog: false,
			userID: "", // 当前编辑的用户Id
			userForm: {
				realname: "",
				username: "",
				email: "",
				roles: [],
				sex: 1,
				status: true
			},
			rules: {
				realname: [{ required: true, message: "请输入真实名称", trigger: "blur" }],
				username: [{ required: true, message: "请输入登录名称", trigger: "blur" }]
			}
		};
	},
	created() {
		this.getUserList();
		this.getRoleList();
	},
	methods: {
		// 查询人员列表
		async getUserList() {
			const res = await getUserlist();
			this.user_list = res.data;
		},
		// 查询角色列表
		async getRoleList() {
			const res = await roleList();
			this.role_list = res.data;
		},
		// 搜索
		handleQuery() {},
		// 重置
		resetQuery() {},
		// 账号状态切换
		async handleStatusChange(row) {
			const result = await this.$confirm("此操作将改变用户状态, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).catch((err) => err);
			if (result !== "confirm") {
				return this.$message.info("取消了操作");
			}
			await userStatus({ id: row.id, status: row.status });
			this.$message.success("状态设置成功");
			this.getUserList();
		},
		// 显示
		showUserDialog(row) {
			if (row.id) {
				this.userForm.realname = row.realname;
				this.userForm.username = row.username;
				this.userForm.email = row.email;
				this.userForm.sex = row.sex;
				this.userForm.status = row.status;
				// 过滤roles的id
				if (row.roles.length) {
					row.roles.forEach((item) => {
						this.userForm.roles.push(item.id);
					});
				}
				// 存储当前用户id
				this.userID = row.id;
			}
			this.userDialog = true;
		},
		// 关闭
		handleClose() {
			this.userID = "";
			this.$refs.userForm.resetFields();
			// 表单里面的数组只能手动清空
			this.userForm.roles = [];
		},
		// 提交
		async submitUser() {
			// 验证必传字段
			if (this.userForm.realname && this.userForm.username) {
				if (this.userID) {
					// 编辑
					// 上传当前id
					this.userForm.id = this.userID;
					await updUser(this.userForm);
					this.$message.success("修改成功");
				} else {
					// 新增
					// 设置初始密码
					this.userForm.password = "123456";
					await addUser(this.userForm);
					this.$message.success("添加成功");
				}
				this.userDialog = false;
				this.getUserList();
			}
		},
		// 删除
		async deleteUser(id) {
			const result = await this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).catch((err) => err);
			if (result !== "confirm") {
				return this.$message.info("取消了删除");
			}
			const res = await delUser({ id: id });
			this.$message.success("删除成功");
			this.getUserList();
		}
	}
};
</script>

<style lang="scss" scoped>
.bold {
	font-weight: bold;
}
.ml_20 {
	margin-left: 20px;
}
.toolbar {
	margin-bottom: 10px;
}
</style>
